﻿<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="block_slider.ascx.cs"
    Inherits="AnThinhBankCompany.block_slider" %>
<script>
    jQuery(document).ready(function ($) {
        var options = {
            $AutoPlay: true,                                    //[Optional] Whether to auto play, to enable slideshow, this option must be set to true, default value is false
            $AutoPlaySteps: 1,                                  //[Optional] Steps to go for each navigation request (this options applys only when slideshow disabled), the default value is 1
            $AutoPlayInterval: 6000,                            //[Optional] Interval (in milliseconds) to go for next slide since the previous stopped if the slider is auto playing, default value is 3000
            $PauseOnHover: 1,                               //[Optional] Whether to pause when mouse over if a slider is auto playing, 0 no pause, 1 pause for desktop, 2 pause for touch device, 3 pause for desktop and touch device, 4 freeze for desktop, 8 freeze for touch device, 12 freeze for desktop and touch device, default value is 1

            $ArrowKeyNavigation: true,   			            //[Optional] Allows keyboard (arrow key) navigation or not, default value is false
            $SlideDuration: 500,                                //[Optional] Specifies default duration (swipe) for slide in milliseconds, default value is 500
            $MinDragOffsetToSlide: 20,                          //[Optional] Minimum drag offset to trigger slide , default value is 20
            $SlideWidth: 800,                                 //[Optional] Width of every slide in pixels, default value is width of 'slides' container
            //$SlideHeight: 300,                                //[Optional] Height of every slide in pixels, default value is height of 'slides' container
            $SlideSpacing: 0, 					                //[Optional] Space between each slide in pixels, default value is 0
            $DisplayPieces: 1,                                  //[Optional] Number of pieces to display (the slideshow would be disabled if the value is set to greater than 1), the default value is 1
            $ParkingPosition: 0,                                //[Optional] The offset position to park slide (this options applys only when slideshow disabled), default value is 0.
            $UISearchMode: 1,                                   //[Optional] The way (0 parellel, 1 recursive, default value is 1) to search UI components (slides container, loading screen, navigator container, arrow navigator container, thumbnail navigator container etc).
            $PlayOrientation: 1,                                //[Optional] Orientation to play slide (for auto play, navigation), 1 horizental, 2 vertical, 5 horizental reverse, 6 vertical reverse, default value is 1
            $DragOrientation: 3,                                //[Optional] Orientation to drag slide, 0 no drag, 1 horizental, 2 vertical, 3 either, default value is 1 (Note that the $DragOrientation should be the same as $PlayOrientation when $DisplayPieces is greater than 1, or parking position is not 0)

            $BulletNavigatorOptions: {                                //[Optional] Options to specify and enable navigator or not
                $Class: $JssorBulletNavigator$,                       //[Required] Class to create navigator instance
                $ChanceToShow: 2,                               //[Required] 0 Never, 1 Mouse Over, 2 Always
                $ActionMode: 1,                                 //[Optional] 0 None, 1 act by click, 2 act by mouse hover, 3 both, default value is 1
                $AutoCenter: 2,                                 //[Optional] Auto center navigator in parent container, 0 None, 1 Horizontal, 2 Vertical, 3 Both, default value is 0
                $Lanes: 1,                                      //[Optional] Specify lanes to arrange items, default value is 1
                $SpacingX: 10,                                  //[Optional] Horizontal space between each item in pixel, default value is 0
                $SpacingY: 10,                                  //[Optional] Vertical space between each item in pixel, default value is 0
                $Orientation: 2                                 //[Optional] The orientation of the navigator, 1 horizontal, 2 vertical, default value is 1
            },

            $ArrowNavigatorOptions: {
                $Class: $JssorArrowNavigator$,              //[Requried] Class to create arrow navigator instance
                $ChanceToShow: 2,                               //[Required] 0 Never, 1 Mouse Over, 2 Always
                $AutoCenter: 0                                  //[Optional] Auto center navigator in parent container, 0 None, 1 Horizontal, 2 Vertical, 3 Both, default value is 0
            },

            $ThumbnailNavigatorOptions: {
                $Class: $JssorThumbnailNavigator$,              //[Required] Class to create thumbnail navigator instance
                $ChanceToShow: 2,                               //[Required] 0 Never, 1 Mouse Over, 2 Always
                $ActionMode: 0,                                 //[Optional] 0 None, 1 act by click, 2 act by mouse hover, 3 both, default value is 1
                $DisableDrag: true,                             //[Optional] Disable drag or not, default value is false
                $Orientation: 2                                 //[Optional] Orientation to arrange thumbnails, 1 horizental, 2 vertical, default value is 1
            }
        };

        var jssor_slider2 = new $JssorSlider$("slider2_container", options);
        //responsive code begin
        //you can remove responsive code if you don't want the slider scales while window resizes
        function ScaleSlider() {
            var parentWidth = jssor_slider2.$Elmt.parentNode.clientWidth;
            if (parentWidth)
                jssor_slider2.$ScaleWidth(Math.min(parentWidth, 800));
            else
                window.setTimeout(ScaleSlider, 30);
        }

        ScaleSlider();

        if (!navigator.userAgent.match(/(iPhone|iPod|iPad|BlackBerry|IEMobile)/)) {
            $(window).bind('resize', ScaleSlider);
        }


        //if (navigator.userAgent.match(/(iPhone|iPod|iPad)/)) {
        //    $(window).bind("orientationchange", ScaleSlider);
        //}
        //responsive code end
    });
    </script>
<!-- Jssor Slider Begin -->
<!-- You can move inline styles to css file or css block. -->
<div id="slider2_container" style="position: relative; width: 800px; height: 400px;
    overflow: hidden;">
    <!-- Loading Screen -->
    <div u="loading" style="position: absolute; top: 0px; left: 0px;">
        <div style="filter: alpha(opacity=70); opacity: 0.7; position: absolute; display: block;
            background-color: #000; top: 0px; left: 0px; width: 100%; height: 100%;">
        </div>
        <div style="position: absolute; display: block; background: url(/Images/loading.gif) no-repeat center center;
            top: 0px; left: 0px; width: 100%; height: 100%;">
        </div>
    </div>
    <!-- Slides Container -->
    <div u="slides" style="cursor: move; position: absolute; left: 100px; top: 0px;
        width: 800px; height: 300px; overflow: hidden;">
        <div>
            <img u="image" src="/Images/landscape/01.jpg" />
            <div u="thumb">
                This is thumbnail as well.<br />
                Do you know that you can place thumbnail navigator anywhere?<br />
                <br />
                <img src="/Images/icon-slider-12-jquery.png" style="float: left; margin-right: 8px;" />
                Do you know that thumbnail can be any format?
            </div>
        </div>
        <div>
            <img u="image" src="/Images/landscape/02.jpg" />
            <div u="thumb">
                Do you notice that this slider is simple right to left moving image slider? Do you
                notice that auto play paused when mouse over?<br />
                Do you notice that you can touch (with mouse on pc, finger on mobile device) to
                catch the moving?</div>
        </div>
        <div>
            <img u="image" src="/Images/landscape/03.jpg" />
            <div u="thumb">
                Do you notice the navigator is vertical?<br />
                <br />
                Do you know that you can spepcify steps (by '$Steps' option) to go for each navigation
                request?</div>
        </div>
        <div>
            <img u="image" src="/Images/landscape/04.jpg" />
            <div u="thumb">
                Do you notice that the arrow navigator appears with css3 transition?<br />
                <br />
                Do you know that you can spepcify steps (by '$Steps' option) to go for each navigation
                request?</div>
        </div>
        <div>
            <img u="image" src="/Images/landscape/01.jpg" />
            <div u="thumb">
                Do you know that you can place navigator, arrow navigator anywhere?</div>
        </div>
        <div>
            <img u="image" src="/Images/landscape/02.jpg" />
            <div u="thumb">
                Do you know that you can customize navigator, arrow navigator to any format?<br />
                <br />
                Do you know that you can insert your own shadow into jssor slider?<br />
                Do you know that you can insert any UI into jssor slider?</div>
        </div>
        <div>
            <img u="image" src="/Images/landscape/03.jpg" />
            <div u="thumb">
                Do you know that you can add css3 transition to thumbnail?<br />
                Do you know that <a href="http://www.jssor.com/demos/x-flutter.html">thumbnail is also
                    draggable</a>?<br />
                <br />
                Do you like <a href="http://www.jssor.com/demos/tab-slider.html">Tab Implementation</a>
                of thumbnail navigator?</div>
        </div>
        <div>
            <img u="image" src="/Images/landscape/04.jpg" />
            <div u="thumb">
                Would you like vertical thumbnail navigator?<br />
                Would you like <a href="http://www.jssor.com/demos/image-gallery-vertical-bar.html">
                    multiline thumbnail navigator</a>?<br />
                Do you know that you can <a href="../examples-jquery/thumbnail-navigator-with-arrows.source.html">
                    add arrows for thumbnail navogator?</a><br />
                Do you know that you can design jssor slider to any look that you can imagine?</div>
        </div>
    </div>
    <!-- ThumbnailNavigator Skin Begin -->
    <div u="thumbnavigator" class="slider2-T" style="position: absolute; top: 100px;
        left: 0px; width: 250px; height: 200px;">
        <div style="filter: alpha(opacity=60); opacity: 0.6; position: absolute; display: block;
            background-color: #ffffff; top: 0px; left: 0px; width: 100%; height: 100%;">
        </div>
        <!-- Thumbnail Item Skin Begin -->
        <div u="slides">
            <div u="prototype" style="position: absolute; width: 250px; height: 200px; top: 0;
                left: 0;">
                <thumbnailtemplate style="font-family: verdana; font-weight: normal; position: absolute;
                    width: 100%; height: 100%; top: 0; left: 0; color: #000; line-height: 22px; font-size: 14px;
                    padding: 5px;"></thumbnailtemplate>
            </div>
        </div>
        <!-- Thumbnail Item Skin End -->
    </div>
    <!-- ThumbnailNavigator Skin End -->
    <!-- Bullet Navigator Skin Begin -->
    <!-- jssor slider bullet navigator skin 01 -->
    <style>
        /*
            .jssorb01 div           (normal)
            .jssorb01 div:hover     (normal mouseover)
            .jssorb01 .av           (active)
            .jssorb01 .av:hover     (active mouseover)
            .jssorb01 .dn           (mousedown)
            */.jssorb01 div, .jssorb01 div:hover, .jssorb01 .av
        {
            filter: alpha(opacity=70);
            opacity: .7;
            overflow: hidden;
            cursor: pointer;
            border: #000 1px solid;
        }
        .jssorb01 div
        {
            background-color: gray;
        }
        .jssorb01 div:hover, .jssorb01 .av:hover
        {
            background-color: #d3d3d3;
        }
        .jssorb01 .av
        {
            background-color: #fff;
        }
        .jssorb01 .dn, .jssorb01 .dn:hover
        {
            background-color: #555555;
        }
    </style>
    <!-- bullet navigator container -->
    <div u="navigator" class="jssorb01" style="position: absolute; bottom: 16px; right: 10px;">
        <!-- bullet navigator item prototype -->
        <div u="prototype" style="position: absolute; width: 12px; height: 12px;">
        </div>
    </div>
    <!-- Bullet Navigator Skin End -->
    <!-- Arrow Navigator Skin Begin -->
    <style>
        /* jssor slider arrow navigator skin 05 css *//*
            .jssora05l              (normal)
            .jssora05r              (normal)
            .jssora05l:hover        (normal mouseover)
            .jssora05r:hover        (normal mouseover)
            .jssora05ldn            (mousedown)
            .jssora05rdn            (mousedown)
            */.jssora05l, .jssora05r, .jssora05ldn, .jssora05rdn
        {
            position: absolute;
            cursor: pointer;
            display: block;
            background: url(/Images/a17.png) no-repeat;
            overflow: hidden;
        }
        .jssora05l
        {
            background-position: -10px -40px;
        }
        .jssora05r
        {
            background-position: -70px -40px;
        }
        .jssora05l:hover
        {
            background-position: -130px -40px;
        }
        .jssora05r:hover
        {
            background-position: -190px -40px;
        }
        .jssora05ldn
        {
            background-position: -250px -40px;
        }
        .jssora05rdn
        {
            background-position: -310px -40px;
        }
    </style>
    <!-- Arrow Left -->
   <%-- <span u="arrowleft" class="jssora05l" style="width: 40px; height: 40px; bottom: 60px;
        left: 330px;"></span>--%>
    <!-- Arrow Right -->
  <%--  <span u="arrowright" class="jssora05r" style="width: 40px; height: 40px; bottom: 60px;
        right: 330px"></span>--%>
    <!-- Arrow Navigator Skin End -->
    <a style="display: none" href="http://www.jssor.com">javascript</a>
    <!-- Trigger -->
</div>
<!-- Jssor Slider End -->
